<script setup>

import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
import { useUserStore } from "@/stores/user";
import { emailValid, phoneValid } from "@/utils/validator";

const info = ref({
  account:'',
  password:''
})

const formRef = ref(null)
const canLogin = ref(false)
const useStore = useUserStore()
import router from "@/router";

const accountValid = (rule, value, callback) => {
  if (!value) {
    callback(new Error('账号不能为空'));
  }
  else if (!emailValid(value) && !phoneValid(value)) {
    callback(new Error('账号必须是有效的手机号或邮箱地址'));
  }
  else {
    callback();
  }
};

const rules = ref({
  account:[
    {required:true,message:'请输入邮箱号/手机号',trigger:'blur'},
    {validator:accountValid,trigger:'blur'}
  ],
  password:[
    {required:true,message:'请输入密码',trigger:'blur'}
  ]
})
watch(info,
    () => {
    formRef.value.validate((valid) => {
      if(valid) {
        canLogin.value = true
      } else {
        canLogin.value = false
      }
    })
  },
  {
    deep:true
  }
)

const handleLogin = () => {
  formRef.value.validate(async (valid) => {
    if(!valid) {
      return ElMessage.error('请填写正确的信息')
    }
    try {
      const data = {
        password:info.value.password
      }
      if(emailValid(info.value.account)) {
        data.email = info.value.account;
      }else if(phoneValid(info.value.account)) {
        data.phoneNumber = info.value.account
      }
      console.log("去登录");

      await useStore.loginAction(data)
      console.log("登录成功");

      ElMessage.success('登录成功')
      setTimeout(() => {
         router.push('/main')
      })
    }catch (e) {
      ElMessage.error(e.message)
    }
  })
}
</script>

<template>
    <div class="login-container">
      <div class="login-form">
        <div class="title">
          <span style="padding-right: 30px; border-right: 3px solid black;">HES</span><span style="margin-left: 30px;">Management</span>
        </div>
        <div class="form"  >
          <el-form :model="info" :rules="rules" ref="formRef">
            <el-form-item label="账号" prop="account">
              <el-input
              size="large"
              v-model="info.account"
              placeholder="请输入邮箱号/手机号"/>
            </el-form-item>
            <el-form-item label="密码" prop="password" style="margin-top: 10px;" >
              <el-input
              size="large"
              v-model="info.password"
              placeholder="请输入密码"
              type="password" show-password/>
            </el-form-item>
            <button class="login-btn" :class="{can_login:canLogin}" @click="handleLogin">登录</button>
          </el-form>
        </div>
      </div>
    </div>
</template>

<style scope lang="less">
  .login-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('@/assets/imgs/oonn.jpg');
    background-color: aqua;
    .login-form {
      width: 30%;
      height: 50%;
      background-color: white;
      opacity: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .title {
        display: flex;
        font-weight: 600;
        color: black;
        font-size: 18px;
        font-family: 'Arial Black', sans-serif;
        font-weight: bold;
      }
      .form {
        width: 100%;
        .el-form {
          margin: 40px;
        }
        .el-form-item {
          display: block;
          .el-form-item__label {
            font-size: 16px;
            color: black;
            font-weight: 600;
          }
        }
        .el-form-item__error {
          font-size: 14px;
          margin-left: 12px;
        }
        .login-btn {
          margin-top: 10px;
          width: 100%;
          padding: 7px 0;
          background-color: #999999;
          border: none;
          color: white;
        }
        .can_login{
          background-color: #3797c2 ;
        }
      }
    }
  }
</style>
